<!DOCTYPE html>
<html lang="zh-CN" class="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>明暗主题切换示例</title>
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        // 自定义主题颜色
                        primary: {
                            light: '#3b82f6',
                            dark: '#60a5fa'
                        }
                    }
                }
            }
        }
    </script>
    <style>
        /* 全局过渡动画 */
        .theme-transition * {
            transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
        }

        /* 避免闪烁的透明度过渡 */
        .theme-transition {
            transition: opacity 0.3s ease;
        }

        /* 初始隐藏状态 */
        .hidden {
            display: none !important;
        }
    </style>
</head>
<body class="theme-transition bg-white dark:bg-gray-900 min-h-screen">
<!-- 主题切换按钮 -->
<div class="fixed top-4 right-4 z-10">
    <button id="theme-toggle"
            class="p-3 rounded-full bg-white dark:bg-gray-800 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105">
        <!-- 太阳图标（亮色主题时显示） -->
        <svg id="sun-icon" class="w-6 h-6 text-yellow-500 hidden dark:block" fill="currentColor" viewBox="0 0 20 20">
            <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
        </svg>
        <!-- 月亮图标（暗色主题时显示） -->
        <svg id="moon-icon" class="w-6 h-6 text-gray-700 block dark:hidden" fill="currentColor" viewBox="0 0 20 20">
            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
        </svg>
    </button>
</div>

<!-- 主要内容区域 -->
<div class="container mx-auto px-4 py-8">
    <!-- 头部区域 -->
    <header class="text-center mb-12">
        <h1 class="text-4xl md:text-5xl font-bold text-gray-800 dark:text-white mb-4">
            明暗主题切换演示
        </h1>
        <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
            这是一个使用 HTML、CSS、JavaScript 和 TailwindCSS 实现的主题切换示例
        </p>
    </header>

    <!-- 卡片网格 -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-12">
        <!-- 卡片 1 -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-200 dark:border-gray-700">
            <div class="w-12 h-12 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center mb-4">
                <svg class="w-6 h-6 text-blue-600 dark:text-blue-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                </svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">快速响应</h3>
            <p class="text-gray-600 dark:text-gray-300">页面响应速度快，用户体验流畅自然。</p>
        </div>

        <!-- 卡片 2 -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-200 dark:border-gray-700">
            <div class="w-12 h-12 bg-green-100 dark:bg-green-900 rounded-lg flex items-center justify-center mb-4">
                <svg class="w-6 h-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">易于使用</h3>
            <p class="text-gray-600 dark:text-gray-300">简洁直观的界面设计，操作简单方便。</p>
        </div>

        <!-- 卡片 3 -->
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 p-6 border border-gray-200 dark:border-gray-700">
            <div class="w-12 h-12 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center mb-4">
                <svg class="w-6 h-6 text-purple-600 dark:text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17h.01"></path>
                </svg>
            </div>
            <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">美观设计</h3>
            <p class="text-gray-600 dark:text-gray-300">现代化的设计风格，视觉效果出色。</p>
        </div>
    </div>

    <!-- 表单区域 -->
    <div class="max-w-2xl mx-auto">
        <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-8 border border-gray-200 dark:border-gray-700">
            <h2 class="text-2xl font-bold text-gray-800 dark:text-white mb-6">联系我们</h2>
            <form class="space-y-6">
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        姓名
                    </label>
                    <input type="text"
                           class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-colors duration-200"
                           placeholder="请输入您的姓名">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        邮箱
                    </label>
                    <input type="email"
                           class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-colors duration-200"
                           placeholder="请输入您的邮箱">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                        留言
                    </label>
                    <textarea rows="4"
                              class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-white transition-colors duration-200"
                              placeholder="请输入您的留言"></textarea>
                </div>
                <button type="submit"
                        class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-lg transition-colors duration-200 transform hover:scale-105">
                    发送消息
                </button>
            </form>
        </div>
    </div>
</div>

<!-- 底部区域 -->
<footer class="mt-16 py-8 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800">
    <div class="container mx-auto px-4 text-center">
        <p class="text-gray-600 dark:text-gray-400">
            © 2024 主题切换演示. 保留所有权利.
        </p>
    </div>
</footer>

<!-- JavaScript 代码 -->
<script>
    /**
     * 主题切换功能实现
     * 实现原理：
     * 1. 通过 localStorage 存储用户主题偏好
     * 2. 使用 CSS class 控制明暗主题样式
     * 3. 监听系统主题变化并提供手动切换
     */

        // 获取 DOM 元素
    const themeToggle = document.getElementById('theme-toggle');
    const sunIcon = document.getElementById('sun-icon');
    const moonIcon = document.getElementById('moon-icon');
    const htmlElement = document.documentElement;

    /**
     * 获取当前主题
     * @returns {string} 'dark' 或 'light'
     */
    function getCurrentTheme() {
        // 首先检查 localStorage 中是否有用户设置
        const savedTheme = localStorage.getItem('theme');
        if (savedTheme) {
            return savedTheme;
        }

        // 如果没有用户设置，检查系统主题偏好
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            return 'dark';
        }

        // 默认返回 light 主题
        return 'light';
    }

    /**
     * 应用主题到页面
     * @param {string} theme - 要应用的主题 ('dark' 或 'light')
     */
    function applyTheme(theme) {
        // 移除所有主题类
        htmlElement.classList.remove('light', 'dark');
        // 添加当前主题类
        htmlElement.classList.add(theme);

        // 更新本地存储
        localStorage.setItem('theme', theme);

        // 更新按钮图标显示状态
        if (theme === 'dark') {
            sunIcon.classList.remove('hidden');
            moonIcon.classList.add('hidden');
        } else {
            sunIcon.classList.add('hidden');
            moonIcon.classList.remove('hidden');
        }
    }

    /**
     * 切换主题
     */
    function toggleTheme() {
        const currentTheme = getCurrentTheme();
        const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
        applyTheme(newTheme);
    }

    /**
     * 初始化主题
     */
    function initTheme() {
        const theme = getCurrentTheme();
        applyTheme(theme);
    }

    /**
     * 监听系统主题变化
     */
    function watchSystemTheme() {
        // 检查浏览器是否支持 prefers-color-scheme
        if (window.matchMedia) {
            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
            mediaQuery.addEventListener('change', (e) => {
                // 只有当用户没有手动设置主题时才跟随系统变化
                if (!localStorage.getItem('theme')) {
                    const newTheme = e.matches ? 'dark' : 'light';
                    applyTheme(newTheme);
                }
            });
        }
    }

    // 页面加载完成后初始化
    document.addEventListener('DOMContentLoaded', () => {
        initTheme();
        watchSystemTheme();

        // 绑定切换按钮事件
        themeToggle.addEventListener('click', toggleTheme);
    });

    // 页面可见性变化时重新检查主题（处理浏览器标签页切换）
    document.addEventListener('visibilitychange', () => {
        if (!document.hidden) {
            // 延迟执行，确保页面完全恢复
            setTimeout(() => {
                const currentTheme = getCurrentTheme();
                applyTheme(currentTheme);
            }, 100);
        }
    });
</script>
</body>
</html>